<template>
  <div class="merchantsList">
    <div class="head">
      <div class="head_ul" v-loading="loading">
        <div class="head_li">
          <div class="title">
            已售参保卡
            <el-tooltip class="explain" popper-class="explain_detail" effect="dark" content="消费者购买已参保卡数量"
              placement="top">
              <span>?</span>
            </el-tooltip>
          </div>
          <div class="num ellipseHide">
            {{ info.alreadyInsuranceCardTotal }}<span class="numtxt">张</span>
          </div>
        </div>

        <div class="head_li">
          <div class="title">
            购卡金额
            <el-tooltip class="explain" popper-class="explain_detail" effect="dark" content="消费者购卡支付的金额（相当于已使用的保额）"
              placement="top">
              <span>?</span>
            </el-tooltip>
          </div>
          <div class="num ellipseHide">
            <span class="numtxt">¥</span>{{ info.useInsuranceMerchantMoneyTotal }}
          </div>
        </div>

        <div class="head_li">
          <div class="title">
            保额
            <el-tooltip class="explain" popper-class="explain_detail" effect="dark" content="商家配置的保额" placement="top">
              <span>?</span>
            </el-tooltip>
          </div>
          <div class="num ellipseHide">
            <span class="numtxt">¥</span>{{ info.insuranceMerchantMoneyTotal }}
          </div>
        </div>

        <div class="head_li" style="border: 0">
          <div class="title">
            剩余保额
            <el-tooltip class="explain" popper-class="explain_detail" effect="dark" content="商家剩余可用的保额总额"
              placement="top">
              <span>?</span>
            </el-tooltip>
          </div>
          <div class="num ellipseHide">
            <span class="numtxt">¥</span>{{ info.usableInsuranceMerchantMoneyTotal }}
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="main_top">
        <el-form :inline="true" :model="filter" class="demo-form-inline">
          <el-form-item label="店铺名称：">
            <el-input v-model="filter.shopName" placeholder="请输入店铺名称"></el-input>
          </el-form-item>

          <el-form-item label="行业类型：">
            <el-cascader v-model="filter.shopType" :options="typeLs" :show-all-levels="false" @change="handleChange">
            </el-cascader>
          </el-form-item>

          <el-form-item label="保险期限：">
            <el-select v-model="filter.insuranceStatus">
              <el-option v-for="item in insuranceStatusOptions" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="Search">搜索</el-button>
            <el-button @click="setReset">重置</el-button>
          </el-form-item>
        </el-form>
        <div>
          <export-excel-button title="参保商家信息" action="/merchant/v1/insurance/export" :params="ExportParams" />
        </div>
      </div>
      <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
        @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
        <template v-slot:operate="{ scope }">
          <el-link type="primary" @click="lookDetail(scope.row.merchantId,scope.row.shopName)">查看</el-link>
        </template>
      </ex-table>
    </div>
  </div>

</template>
<script>
  import {
    mapState
  } from "vuex";
  // components

  import ExportExcelButton from "@/components/ExportExcelButton/index";
  // api
  import {
    getMerchantList,
    shopTypeTree
  } from "@/api/insuranceUnderwriting";

  // mixins
  import handlePageMixin from "@/mixins/handlePageMixin";

  export default {
    name: "NewIncreaseVerify",
    components: {
      ExportExcelButton
    },
    mixins: [handlePageMixin],
    computed: {
      ...mapState({
        // statusList: function (state) {
        //   return state.common["merchant_apply_status"]; // 要取this的实例，只能用不同函数，不能用箭头函数
        // },
        // industryStatusType: function (state) {
        //   return state.common["industry_type"]; // 要取this的实例，只能用不同函数，不能用箭头函数
        // },
      }),
      ExportParams() {
        const params = {
          ...this.pageOptions,
          ...this.filter,
        };
        return params;
      },
    },
    data() {
      return {
        // 头部数据
        info: {},
        loading: false,
        tableColumn: [{
            prop: "area",
            label: "地区",
            width: "160"
          },
          {
            prop: "shopName",
            label: "店铺名称",
            width: "200"
          },
          {
            prop: "shopTypeName",
            label: "行业类型",
            width: "150"
          },
          {
            prop: "maxCardTotal",
            label: "最大发卡规模",
            width: "150"
          },
          {
            prop: "registeredCardLimit",
            label: "单张卡限额",
            width: "150"
          },
          {
            prop: "superviseRatio",
            label: "存管比例（%）",
            width: "150"
          },
          {
            prop: "useCardTotal",
            label: "已售参保卡（张）",
            width: "150"
          },
          {
            prop: "totalInsuranceMoney",
            label: "保额（￥）",
            width: "150"
          },
          {
            prop: "useInsuranceMoney",
            label: "购卡金额（￥）",
            width: "150"
          },
          {
            prop: "usableInsuranceMoney",
            label: "剩余保额（￥）",
            width: "150"
          },
          {
            prop: "date",
            label: "保险期限",
            width: "150"
          },
          {
            label: "操作",
            slot: true,
            slotName: "operate",
            width: "100",
            fixed: "right",
          },
        ],
        // 搜索数据
        filter: {
          shopName: "", //店铺名称
          shopType: "", //行业类型
          insuranceStatus: "" // 保险期限
        },
        tableData: [], //数据列表
        total: '', //总数
        typeLs: [], //行业列表
        // 保险期限
        insuranceStatusOptions: [{
            id: "",
            value: '全部'
          },
          {
            id: 1,
            value: '保障中'
          },
          {
            id: 2,
            value: '已失效'
          },
          {
            id: 3,
            value: '待生效'
          }
        ]
      };
    },

    created() {
      this.getTypels();
      // this.getNum();
      this.getList();
    },
    methods: {
      getTypels() {
        //shopTypeTree获取行业类型
        this.loading = true;
        shopTypeTree()
          .then((res) => {
            let ls = [];
            console.log("res.result+++", res.result);
            ls = this.getTreeData(res.result);
            // console.log(this.typeLs)
            let ls1 = ls.map((item) => {
              item.value = item.id;
              item.children.map((items) => {
                items.value = items.id;
              });
              return item;
            });
            console.log("ls1+++", ls1);
            this.typeLs = ls1;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      getTreeData(data) {
        // 循环遍历json数据
        for (var i = 0; i < data.length; i++) {
          if (data[i].children.length < 1) {
            // children若为空数组，则将children设为undefined
            // data[i].children=undefined;
            delete data[i].children;
          } else {
            // children若不为空数组，则继续 递归调用 本方法
            this.getTreeData(data[i].children);
          }
        }
        return data;
      },
      handleChange(value) {
        let _this = this;
        console.log("value+++++++++++++", value[1]);
        _this.filter.shopType = value[1];
      },

      //查看详情
      lookDetail(id, name) {
        //  console.log(id)
        this.$router.push({
          path: "/insuranceUnderwriting/merchantsDetail",
          query: {
            id: id,
            name: name
          },
        });
      },
      select(value) {
        console.log("select", value);
      },
      //列表
      getList() {
        this.loading = true;
        const params = {
          ...this.pageOptions,
          ...this.filter,
        };

        getMerchantList(params)
          .then((res) => {
            const {
              page,
              insMerchantInsuranceTotalDTO
            } = res.result
            const {
              total,
              records
            } = page;
            this.info = insMerchantInsuranceTotalDTO //统计数据
            this.total = total
            this.$refs.table.pageOptions.total = total;
            this.tableData = records;
          })
          .finally(() => {
            this.loading = false;
          });
      },

      //重置
      setReset() {
        this.filter.shopName = "";
        this.filter.shopType = "";
        this.filter.insuranceStatus = "";
        this.pageOptions.pageNum = 1;
        // this.currentNavtab = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
      },
      //搜索
      Search() {
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
      },
    },
  };

</script>

<style lang="scss" scoped>
  @import "./style/merchantsList";
  // @import "./style/public";
</style>
